<template>
  <div>
     <weuiHeader theme="评价订单"></weuiHeader>

     <div class="evaluate">
	   <p class="col999">选出您最喜欢的菜品:</p>
		<ul class="dish-box">
			<li v-for="(dish,index) in dishList" :class="{'float-left':index % 2 == 0,'float-right':index % 2 == 1}" @click="select(dish)">
				<img :src="dish.dishesUrl" class="dish" v-if="dish.dishesUrl">
				<img src="../images/nodish.png" class="dish" v-if="!dish.dishesUrl">
				<div class="dish-info">
					<p class="float-left text-overflow" style="flex:3">{{dish.dishesName}}<span v-if="dish.propertyName!=''">（{{dish.propertyName}}）</span></p>
					<p class="float-right" style="color:#fd661c;flex:1">¥{{dish.price}}</p>
				</div>

				<div class="bg-layer" v-show="dish.checked">
					<div style="position: relative;height: 100%;">
						<img src="../images/enjoy_tick.png">
					</div>
				</div>
			</li>
	
		</ul>

	<div class="opt">
		<button type="button" @click="commit()">提交</button>
	</div>

   </div>
</div>
</template>

<script type="text/ecmascript-6">
    import weuiHeader from '../components/weuiHeader';
	import Vue from 'vue'
	import { Toast } from 'mint-ui';
	Vue.component(Toast.name, Toast);

 const SUCCESS = 200;
    export default {
      data() {
          return {
          	dishList:[]
          }
        },
        activated(){
				let orderId = this.$route.query.orderId;
				this._getUnEvaluateDishes(orderId);
			},
        methods: {
        	select(item) {
				if(typeof item.checked=='undefined'){
					this.$set(item,"checked",true);
				}else{
					item.checked = !item.checked;
				}
			},
        	_getUnEvaluateDishes(orderId){
        		const _this = this;
        		const token = window.localStorage.getItem('token');
        		this.$http({
					method:'get',
					url:'/fastfood/findDishesInfo?orderId='+orderId,
					headers: {'Authorization':'Basic '+ token },
				}).then((response) => {
					if(response.data.code==SUCCESS){
						_this.dishList = response.data.model;
					}
				});
        	},
        	commit(){
        		const _this = this;
				let _dishesId = "";	
				let token = localStorage.getItem("token");
				let nickName = localStorage.getItem("nickName");
				let headUrl = localStorage.getItem("headUrl");
				let storeId = localStorage.getItem("storeId");
				let orderId = this.$route.query.orderId;
				orderId = Number(orderId);
				let orderNo = this.$route.query.orderNo;
				orderNo = Number(orderNo);

				let selectLength = 0;
				this.dishList.forEach(function(item){
					if(item.checked){
						selectLength += 1;
					}
				});

				if(selectLength ==0){
					Toast('请选中您要评价的菜品');
					return;
				}

				//遍历选中的菜品
				this.dishList.forEach(function(item,index){
					if(item.checked){
						let _propertyName="";
						if(item.propertyName){
							_propertyName = item.propertyName;
						}else{
							_propertyName = '""';
						}
						if(index < selectLength ){
							_dishesId += item.dishesId + ":" + _propertyName + ",";
						}else{
							_dishesId += item.dishesId + ":" + _propertyName;
						}
					}
				});
				let postData = {
					orderId:orderId,
					orderNo:orderNo,
					storeId:storeId,
					dishesId:_dishesId,
					nickname:nickName,
					headImgUrl:headUrl
				};

				console.log(postData);
				this.$http({
					method:'post',
					url:'/fastfood/orderInfoEvaluate',
					headers : {'Authorization':'Basic '+token},
					data:postData
				}).then((res) => {
					if(res.data.code==SUCCESS){
						this.$router.push({ name: 'evaluateResult', query: { orderId: orderId,storeId:storeId}})
					}else{
						Toast(res.data.message);
					}
				});
        	}
        
        },
       components: {
          weuiHeader
       }
      
    };
</script>

<style lang="less" scoped>

.evaluate {
	padding: 60px 10px;

	.dish-box {
		margin-top: 10px;
	}

	.dish-box li {
		background: white;
		width: 49%;
		margin-bottom: 10px;
		box-shadow: 1px 1px 9px rgba(0,0,0,.2);
		border-radius: 4px;
		position: relative;
	}

	.dish {
		width: 100%;
		height: 170px;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	.dish-info {
		height: 37px;
		line-height: 37px;
		padding: 0 10px;
		font-size: 14px;
		display:flex;
	}

	.opt {
		height: 50px;
		width: 100%;
		background: white;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 100;
		padding: 5px 10px;
	}

	.opt button {
		height: 100%;
		width: 100%;
		background: #11bbb4;
		font-size: 18px;
		color: white;
		border-radius: 4px;
		letter-spacing: 20px;
	}

	.opt:before{
	  content: " ";
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  border-bottom: 1px solid #BCBAB6;
	  color: #BCBAB6;
	  -webkit-transform-origin:0 100%;
	  transform-origin:0 100%;
	  -webkit-transform: scaleY(0.5);
	  transform: scaleY(0.5);
	}

	.bg-layer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.5);
		z-index: 10;
	}

	.bg-layer img {
		width: 44px;
		height: 44px;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		z-index: 20;
	}

}
	
</style>
